/*********************
申诉处理
* */
<template>
  <basic-container>
    <el-row v-if="whichShow==1">
      <el-row style="margin:25px 0 0 0 ;">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="姓名">
                <el-input v-model="searchForm.assessRealName" placeholder="姓名" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核名称">
                <el-input v-model="searchForm.name" placeholder="考核名称" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <selectSearch @getDataByPerid="getDataByPerid"></selectSearch>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-row>
      <el-row  style=" border-bottom: 1px solid #b0bde2">
      </el-row>
      <div style="margin:20px 0 0 0 ">
        <span>指标考核&nbsp;&nbsp;</span>
        <el-radio-group v-model="choosePerOrDept" @change="choosePerOrDeptChange">
          <el-radio :label="0">人员</el-radio>
          <el-radio :label="1">机构</el-radio>
        </el-radio-group>
      </div>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          stripe
          header-align="center"
          v-loading="dataListLoading"
        >
          <el-table-column type="index" label="序号" :index="indexMethod" align="center"  width="55"></el-table-column>
          <el-table-column prop="assessUserName" align="center" label="员工编号" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessRealName" align="center" label="姓名" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip v-else></el-table-column>
          <el-table-column prop="name" align="center" label="考核名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="period" align="center" label="考核周期" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sumScore" align="center" label="总得分" show-overflow-tooltip></el-table-column>
          <el-table-column prop="state" align="center" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.appealState | transState}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" width="90" label="操作">
            <template slot-scope="scope">
             <!-- <el-button type="primary" plain size="small" @click="handleWith(scope.row,1)">查看</el-button>-->
              <el-button type="primary" plain size="small" @click="handleWith(scope.row,2)">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageData.pageSize"
            :total="pageData.totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </el-row>
    <el-row v-if="whichShow==2"  style="padding: 0 20px; background: #FBFBFD;">
      <el-row style="border-bottom: 1px solid rgb(176, 189, 226);" >
          <el-form ref="form" :model="formData"  :inline="true" label-width="100px" >
            <el-form-item  style="display: flex;justify-content: center">
              <span  v-if="!choosePerOrDept"   style="font-weight: bold;font-size: 20px">{{formData.assessRealName}}</span>
              <span  v-else  style="font-weight: bold;font-size: 20px">{{formData.assessDeptName}}</span>
            </el-form-item>
            <el-row style="display: flex;align-items: center;justify-content: center;margin-top: 10px" class="detailinfo">
              <el-form-item label="员工编号："  v-if="!choosePerOrDept">
                <span>{{formData.assessUserName}}</span>
              </el-form-item>
              <el-form-item label="部门："  v-if="!choosePerOrDept">
                <span>{{formData.assessDeptName}}</span>
              </el-form-item>
              <el-form-item label="周期：">
                <span>{{formData.period}}</span>
              </el-form-item>
            </el-row>
          </el-form>
      </el-row>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="detailDataList"
          border
          show-summary
          :summary-method="getSummaries"
          stripe
          header-align="center"
          v-loading="dataListLoading"
        >
          <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
          <el-table-column prop="normType" align="center" label="指标分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="normName" align="center" label="指标名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="normRule" align="center" label="指标规则" show-overflow-tooltip></el-table-column>
          <el-table-column prop="weight" align="center" label="权重" show-overflow-tooltip></el-table-column>
          <el-table-column prop="formula" align="center" label="计算公式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="targetValue" align="center" label="目标值" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unit" align="center" label="单位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="finishValue" align="center" label="填报值" show-overflow-tooltip></el-table-column>
          <el-table-column prop="score" align="center" label="得分" show-overflow-tooltip></el-table-column>
          <el-table-column prop="finalScore" align="center" label="评审得分" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="!isHide">{{scope.row.finalScore}}</span>
              <el-input
                v-else
                v-model="scope.row.finalScore"   @blur="getScore(scope.row, scope.$index)"
              ></el-input><!-- @change="((val)=>{ detailScoreChange(scope.row)})"  -->
            </template>
          </el-table-column>

          <el-table-column
            prop="provideRealName"
            align="center"
            label="数据提供部门/人"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <el-row >
          <el-form :model="appealForm" :rules="rules" ref="appealFormRef" label-width="90px" >
            <el-form-item label="申诉理由:" class="sslyandanswer">
              <span>{{formData.reason?formData.reason:''}}</span>
            </el-form-item>
            <el-form-item label="申诉答复:" prop="answer" class="ssly">
              <span v-if="!isHide">{{appealForm.answer}}</span>
              <el-input
                v-else
                v-model="appealForm.answer"
                type="textarea"
                style="width:100%;"
                placeholder="请输入申诉答复"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row style="margin:10px;text-align:right">
          <el-button v-if="isHide" type="success" @click="passOrReject(1)">通过</el-button>
          <el-button v-if="isHide" type="warning" @click="passOrReject(0)">不通过</el-button>
          <el-button type="primary" @click="whichShow=1">返回</el-button>
        </el-row>
      </el-row>
    </el-row>
  </basic-container>
</template>

<script>
import targetExaminHead from "@/views/dailyExamine/components/targetExaminHead"; //状态头
import {
  resultExaminList,
  resultExaminDetail,
  examineAppeal,
    hfSs,
  resultExaminDetailSave
} from "@/api/dailyExamine/targetExamine/InitiateFilling";
import { examineList } from "@/api/dailyExamine/targetExamine/createAssessment"; //接口api
import { validatenull } from "@/util/validate"; //判断空
import selectSearch from "@/views/dailyExamine/components/select-search.vue"; //流程组件

export default {
  data() {
      var checkAnswer = (rule, value, callback) => {
          if (value) {
              if (value.length>250) {
                  callback(new Error("最多可输入250个字符!"));
              } else {
                  callback();
              }
          } else {
              callback(new Error("请输入申诉理由"));
          }
      };
    return {
      choosePerOrDept: 0,
      isHide: false, //是否隐藏
      detailDataList: [], //申诉表格数组
      formData:{},
      whichShow: 1, //显示哪个组件
      appealForm: {
        answer: null
      }, //申诉对象
      searchheight: "0", //搜索组件的高度
      searchadvanced: true, //搜索的显隐
      searchForm: {}, //搜索对象
      dataListLoading: false, //表格是否加载
      dataList: [], //表格数组
      multipleSelection: [], //勾选数据
      pageData: {
        //分页对象
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      },
      handleData: {}, //查看or处理暂存对象
      rules:{
          answer:[{ validator:checkAnswer,trigger: "blur"}]
      },
      sumScore:''
    };
  },
  filters: {
      transState(val) {
          switch (val) {
              case 0:
                  return "待确认";
                  break;
              case 1:
                  return "申诉中";
                  break;
              case 2:
                  return "申诉通过";
                  break;
              case 3:
                  return "申诉被驳回";
                  break;
              case 4:
                  return "已作废";
                  break;
              case 5:
                  return "已确认";
                  break;
              case 25:
                  return "已确认";
                  break;
              case 35:
                  return "已确认";
                  break;
              case 45:
                  return "已确认";
                  break;
              default:
                  break;
          }
          // 0待确认
          // 1申诉中
          // 2申诉通过
          // 3申诉被驳回
          // 4已作废
          // 5已确认
          // 25 申诉通过,已确认
          // 35 申诉被驳回,已确认
          // 45 作废,已确认
          //
          // 0 显示 确认
          // 1 隐藏 确认
          // 2 显示 确认
          // 3 显示 确认
          // 4 显示 确认
          // 5 隐藏 确认
          //
          // ssFlag   0 隐藏申诉   1显示申诉
      }
  },
  components: {
    targetExaminHead, //状态头
    selectSearch
  },
  created() {
    this.getDataList();
  },
  methods: {
      //添加分数
      getScore(row,index) {
         let value = row.finalScore ;
          if (!validatenull(value)){
              if(isNaN(value)){
                  row.finalScore = '' ;
                  this.$message.warning('请输入数字')
              }else{
                  if (value.indexOf('.') > -1) {
                      row.finalScore = value.slice(0, value.indexOf('.') + 2)
                  } else {
                      row.finalScore = value
                  }
              }
          }
      },
    choosePerOrDeptChange() {
      this.pageData.pageIndex = 1 ;
      this.getDataList();
    },
    // 通过or不通过
    passOrReject(type) {
        this.$refs["appealFormRef"].validate(valid => {
            if(valid){
              let scoreArr = [] ;
              let params = '' ;
              this.detailDataList.map( (item,index)=> {
                   let obj = {} ;
                   obj.id = item.id ;
                   obj.finalScore = item.finalScore;
                   scoreArr.push(obj) ;
              }) ;//获取修改分数的集合

             let flag = scoreArr.every(it=>{
                 return !validatenull(it.finalScore) ;
             })
             if(type){ //如果通过，评审得分不可为空
                 if(!flag){
                     this.$message.error('评审得分不可为空！');
                     return ;
                 }
             }

            if (type){
                params = Object.assign(
                    {
                        id: this.handleData.id,
                        answer: this.appealForm.answer,
                        rckhKpiAssessJoinList: scoreArr,
                        sumScore:this.sumScore //评审后的总分
                    },'' ) ;
            }else{
                params =  Object.assign(
                    {
                        id: this.handleData.id,
                        answer: this.appealForm.answer,
                    },'' )
            }

             hfSs(params,type) //type 1 通过 0 不通过
                .then(r => {
                  if (r.data.code == 0) {
                    this.$message.success("处理成功");
                    this.whichShow = 1;
                    this.getDataList();
                  } else {
                    this.$message.error(r.data.msg);
                    this.getDataList();
                  }
                })
                .catch(err => {});
            }else{
                return ;
            }
        })
    },
    // 修改分数
    detailScoreChange(data) {
      resultExaminDetailSave(data.id, data.finalScore)
        .then(r => {
          if (r.data.code == 0) {
            this.$message.success("修改成功");
          } else {
            this.$message.error(r.data.msg);
          }
        })
        .catch(err => {});
    },
    // 查看or处理
    handleWith(data, type) {
      this.whichShow = 2;
      this.handleData = Object.assign(data);
      this.isHide = type == 1 ? false : true;
      resultExaminDetail(data.id)
        .then(r => {
          if (r.data.code == 0) {
            this.detailDataList = r.data.data;
            this.appealForm.answer = r.data.data[0].answer;
            this.formData = r.data.data[0] ;
          }
        })
        .catch(err => {});
    },
    // 返回
    goBack() {
      this.whichShow = 1;
    },
    // 查询条件的展开关闭
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 查询列表
    getDataList() {
      this.dataListLoading = true ;
      examineList(
        Object.assign(
          {
            current: this.pageData.pageIndex,
            size: this.pageData.pageSize,
            type: this.choosePerOrDept
          },
          this.searchForm
        ),
        10
      )
        .then(r => {
          if (r.data.code == 0) {
            this.dataList = r.data.data.records;
            this.pageData.totalPage = r.data.data.total;
            this.dataListLoading = false ;
          }
        })
        .catch(err => {});
    },

    // 条数变化
    sizeChangeHandle(val) {
      this.pageData.pageSize = val;
      this.getDataList();
    },
    // 页码分页变化
    currentChangeHandle(val) {
      this.pageData.pageIndex = 1;
      this.pageData.pageIndex = val;
      this.getDataList();
    },
    //table表索引
    indexMethod(index) {
        return (this.pageData.pageIndex-1)*this.pageData.pageSize+index+1;
    },
      getSummaries(param) {
          //此处打印param可以看到有两项，一项是columns，一项是data，最后一列可以通过columns.length获取到。
          const { columns, data } = param
          const len = columns.length
          const sums = []
          columns.forEach((column, index) => {
              //如果是第一列，则最后一行展示为“总计”两个字
              if (index === 0) {
                  sums[index] = '总计'
                  //如果是最后一列，索引为列数-1，则显示计算总和
              } else if (index === len - 3 ) {
                  sums[index] =  this.formData.sumScore ;
              }else if(index === len - 2){
                  const values = data.map(item => Number(item[column.property]));
                  // const weights = data.map(item => item['weight']) ;
                  // let numArr = [] ;
                  // values.map((item1,index1)=> {
                  //     weights.map((item2,index2)=> {
                  //           if(index1 == index2){
                  //               console.log(item1*item2)
                  //                numArr.push(Number((Number(item1) * Number(item2)*Number(0.01)).toFixed(2)));
                  //           }
                  //     })
                  // })
                  sums[index] = values.reduce((prev, curr) => {
                      const value = Number(curr.toFixed(2))
                      if (!isNaN(value)) {
                          return  Number((prev + curr).toFixed(2))
                      } else {
                          return prev
                      }
                  }, 0);
                  this.sumScore =  sums[index] ;

              }else {
                  sums[index] = ''
              }
          })
          return sums
      },
      //选择周期执行搜索功能
      getDataByPerid(period){
          this.searchForm.period = period ;
          this.getDataList() ;
      }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-select__tags {
  overflow: auto !important;
  //   min-height: 200px !important;
}
::v-deep.el-tag.el-tag--info {
  margin: 5px;
  border: 1px solid green;
}
.demo-form-inline {
  display: flex;
}
/deep/.el-textarea__inner {
  height: 100px !important;
}
/deep/.el-form-item--small.el-form-item{margin-bottom: 0!important; margin-top: 20px;}
.detailinfo .el-form-item--small.el-form-item{margin-top: 0px!important;}
/deep/.sslyandanswer .el-form-item__content{  margin-left: 90px!important;padding: 0 15px!important;min-height: 80px!important;border: 1px solid #ccccda!important;border-radius: 5px!important;}
/deep/.sslyandanswer .el-form-item__label,/deep/.ssly .el-form-item__label {font-weight: bold!important;}
/deep/.el-textarea__inner{background: #fff!important;}
</style>
